<template>
  <table-tool 
    ref="TableToolRef"
    :httpInfo="httpInfo"
    :pageName="pageName"
    :tableConfig="tableConfig"
    :btnConfig="btnConfig"
    :dialogInfo="dialogInfo"
    :rules="rules"
    @setDialogMod="setDialogMod"
  >
    <!-- 搜索框 -->
    <template #searchSlot>
      <el-form ref="searchForm" :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item prop="name" label="角色名">
          <el-input size="small" v-model="searchInfo.name" placeholder="请输入角色名" clearable></el-input>
        </el-form-item>
        <el-form-item prop="type" label="角色类型">
          <el-select size="small"
            v-model="searchInfo.type" placeholder="请选择角色类型" clearable>
            <el-option label = '部门' value="部门"/>
            <el-option label = '人员' value="人员"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetSearch">
            <el-icon class="icon"><elementRefresh/></el-icon> 
            <span class="icon-font">刷新</span>
          </el-button>
          <el-button size="small" type="primary" @click="onSearch">
            <el-icon class="icon"><elementSearch/></el-icon> 
            <span class="icon-font">搜索</span>
          </el-button>
        </el-form-item>
      </el-form>
    </template>

    <!-- 添加修改框 -->
    <template #dialogSlot>
      <el-form-item label="角色名" prop="name">
        <el-input size="small" v-model="dialogInfo.name" placeholder="请填写角色名" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="角色类型" prop="type">
        <el-select size="small" v-model="dialogInfo.type" placeholder="请选择角色类型">
          <el-option label="人员" value="人员"></el-option>
          <el-option label="部门" value="部门"></el-option>
        </el-select>
      </el-form-item>  
      <el-form-item label="角色位次" prop="rsit">
        <el-input size="small" type="number" v-model="dialogInfo.rsit" placeholder="请填写角色位次" autocomplete="off" clearable></el-input>
      </el-form-item>
    </template>
  </table-tool>
</template>

<script>
import { reactive, ref } from 'vue';
import TableTool from '/@/components/table/index.vue'
export default {
  components:{
    TableTool,
  },
  setup () {
    const pageName = '角色'

    const searchInfo =  reactive({
      name:'',
      type:''
    })
    const initInfo = {
      id:'',
      name:'',
      type:'',
      rsit:''
    }
    let rules = ref({
      name: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
      type: [{ required: true, message: '请选择角色类型', trigger: 'blur' }],
      rsit: [{ required: true, message: '请输入角色位次', trigger: 'blur' }],
    })
    const tableConfig = reactive({ // 表格配置
      stripe: true,
      maxHeight: null,
      hasSelectionRole: true,
      button:['edit','del']
    })
    const btnConfig = reactive({
      showAddBtn: true,
      showdeleteBtn: true,
      showImportBtn: true,
      showExportBtn: true,
      fileType: import.meta.env.VITE_API_URL +  'admin/download/excel/role', // 下载文件模板类型
      acceptType: '.xls,.xlsx', // 文件类型
      action: import.meta.env.VITE_API_URL + 'admin/role/batch', // 文件上传地址
      limits: 1, // 上传数量限制
    })
    const httpInfo = reactive({
      listUrl: '/admin/role/getList',
      deleteUrl: '/admin/role/remove',
      saveUrl: '/admin/role/save',
      updateUrl: '/admin/role/update',
    })

    const TableToolRef = ref()
    const searchForm = ref()
    let dialogInfo = reactive(initInfo)
    
    const onSearch = () => {
      TableToolRef.value.searchBtn(searchInfo)
    }
    const resetSearch = () => {
      searchForm.value.resetFields()
			TableToolRef.value.searchBtn(searchInfo)
    }
    const setDialogMod = (nowInfo) =>{
      if (nowInfo == {}) {
        dialogInfo = initInfo
      }else{
        for (const [key, val] of Object.entries(nowInfo)) { 
          dialogInfo[key] = val
        }
      }
    }


    return{
      dialogInfo,
      rules,
      httpInfo,
      pageName,
      searchInfo,
      TableToolRef,
      searchForm,
      setDialogMod,
      resetSearch,
      onSearch,
      tableConfig,
      btnConfig,
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item{
  vertical-align: top;
}
</style>